<template>
  <el-dialog
    title=""
    :visible.sync="dialogVisible"
    width="520px"
    top="0"
    :before-close="cancelBtn"
    :close-on-click-modal="false"
  >
    <i class="el-icon-success"></i>
    <div class="info_1">创建成功！营地系统网址如下：</div>
    <div class="info_2">{{campUrl}}</div>
    <div class="info_3">可在 首页-营地中心 查看营地系统的网址</div>

    <span slot="footer" class="dialog-footer">
      <el-button
        class="confirm"
        v-clipboard:copy="campUrl"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError"
      >复制网站</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    name: "CreateSuccess",
    props: {
      successDialogFu: Boolean,
      campUrlFu: String
    },
    data() {
      return {
        dialogVisible: this.successDialogFu,
        campUrl: this.campUrlFu
      };
    },
    methods: {
      // 复制成功时的回调函数
      onCopy(e) {
        this.$message.success("链接已复制到剪切板！");
        this.confirm();
      },
      // 复制失败时的回调函数
      onError(e) {
        this.$message.error("抱歉，复制失败，请重新复制！")
      },
      confirm() {
        this.dialogVisible = false;
        this.$emit("closeSuccessDialog", this.dialogVisible, true);
      },
      // 取消,关闭弹框，修改父组件的值
      cancelBtn() {
        this.dialogVisible = false;
        this.$emit("closeSuccessDialog", this.dialogVisible, false);
      },
    },
    watch: {
      successDialogFu() {
        this.dialogVisible = this.successDialogFu;
      },
      campUrlFu() {
        this.campUrl = this.campUrlFu;
      },
    },
  };
</script>

<style scoped lang="scss">

  ::v-deep .el-dialog {
    .el-dialog__header {
      padding: 0;
    }

    .el-dialog__body {
      text-align: center;

      .el-icon-success {
        font-size: 60px;
        color: #67C23A;
      }

      .info_1 {
        font-size: 18px;
        margin-top: 10px;
      }

      .info_2 {
        font-size: 18px;
        color: #1c84c6;
        margin-top: 10px;
      }

      .info_3 {
        font-size: 14px;
        color: #cccccc;
        margin-top: 20px;
      }
    }

    .el-dialog__footer {
      text-align: center;
    }
  }

</style>

